<template>
  <div class="content-box" style="display: none;" :style="{ display: 'block' }">
    <div v-for="(item, i) in postList" :key="i">
      <!-- 跳转文章详情页 -->
      <router-link :to="{ path: '/post/detail', query: { id: item.id } }">
        <el-card class="box-card">
          <div class="meta-container">
            <div class="user-message">
              {{ item.account.nickname }}
            </div>
            <el-divider direction="vertical"></el-divider>
            <div class="date">
              {{ item.created_at | toDate }}
            </div>
            <div class="city">
              {{ item.cityName }}
            </div>
          </div>
          <div class="title">{{ item.title }}</div>
          <div class="main-row">
            <div class="main-box">
              <div
                class="abstract"
                v-html="item.summary == '' ? '暂无简要信息' : item.summary"
              ></div>
              <!-- | mdToHtml -->
              <div class="action-list">
                <div class="item">
                  <img src="../../static/like.png" />
                  <span>{{ item.like }}</span>
                </div>
                <div class="item">
                  <img src="../../static/comment.png" />
                  <span>{{ item.comments.length }}</span>
                </div>
                <div class="item">
                  <img src="../../static/read.png" />
                  <span>{{ item.watch }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 接收文章列表
    postList: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    var _this = this;
    this.postList.forEach((element, i) => {
      console.log("111");
      _this.postList[i].summary = _this.mdToHtml(element.summary);
      // console.log(_this.element.summary);
    });
  },
  //过滤器
  filters: {
    // yyyy-MM-dd
    toDate(time) {
      // console.log(time + ",");
      // time = time * 1000
      let date = new Date(time);
      // console.log(date);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const formatTime = y + " 年 " + m + " 月 " + d + " 日";
      return formatTime;
    }
  },
  methods: {
    // 日期格式化
    dateFormat(dateData) {
      var date = new Date(dateData);
    },

    // 将 md 转为 html
    mdToHtml(md) {
      // 将 md 转换为 html
      console.log("entet!");
      let converter = new showdown.Converter();
      return converter.makeHtml(md);
    }
  }
};
</script>

<style lang="less">
.action-list {
  padding: 10px 0 0 0;
  display: flex;
  align-items: center;
  .item {
    position: relative;
    margin-right: 32px;
    font-size: 14px;
    line-height: 20px;
    color: #86909c;
    display: flex;
    align-items: center;
    img {
      display: block;
      width: 20px;
      height: 20px;
      background-size: 100%;
    }
    span {
      margin-left: 4px;
    }
  }
}

.content-box {
  cursor: pointer;
  position: relative;
  background: #fff;
  padding: 16px 20px 0 5px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.meta-container {
  padding: 0 0 5px 0;
  display: flex;
  align-items: center;
  .user-message {
    max-width: 162px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    font-size: 14px;
    line-height: 22px;
    color: #4e5969;
  }
  .date {
    line-height: 14px;
    font-size: 14px;
    color: #86909c;
  }
  .city {
    flex-shrink: 0;
    margin-left: 8px;
    padding: 0 8px;
    background: #fafafa;
    border-radius: 2px;
    font-size: 14px;
    line-height: 22px;
    color: #4e5969;
  }
}

.title {
  // margin: 0 0 8px 0;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: #1d2129;
  font-family: -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell,
    Noto Sans, sans-serif, BlinkMacSystemFont, "Helvetica Neue", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", Arial;
}

.main-row {
  width: 100%;
  padding-bottom: 16px;
  display: flex;

  .main-box {
    margin: 6px 0 0 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .abstract {
      text-overflow: ellipsis;
      overflow: hidden;
      color: #4e5969;
      height: 66px;
      display: block;
    }
  }
}

// .text {
//   font-size: 14px;
// }

// .item {
//   padding: 18px 0;
// }

.box-card {
  width: 550px;
  margin: 0 0 20px 0;
}

.box-card:hover {
  background: #fafafa;
}
</style>
